<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API文档生成</title>
    <!-- 引入LayUI的CSS -->
    <link rel="stylesheet" href="/static/plugins/layui/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <h2>API文档生成</h2>
        <button id="fetchDataBtn" class="layui-btn layui-btn-normal">生成API文档</button>

        <a href="/index/test/resetApiDocHtml" class="btn">重置生成文档文件</a>
        <a href="JavaScript:;" onclick="saveCode()" class="btn">将代码保存为文档</a>
        <div id="output" class="layui-card" style="margin-top: 20px; padding: 20px;">
            <div class="reasoning_content"></div>
            <div class="layui-card-body" style="border: 1px solid grey"></div>
        </div>
    </div>

    <!-- 引入jQuery和LayUI的JS -->
    <script src="/static/js/jquery-3.5.1.js"></script>
    <script src="/static/plugins/layui/dist/layui.js"></script>
    <script>
        $(document).ready(function() {
            // 点击按钮事件
            $('#fetchDataBtn').click(async function() {
                layer.msg('请稍等');
                // 创建一个EventSource对象，连接到服务器端的SSE接口
                const eventSource = new EventSource('/index/test/getApiDocHtml');

                // 监听服务器发送的消息
                eventSource.onmessage = function(event) {
                    console.log(event.data);
                    if (event.data == '[DONE]') {
                        eventSource.close();

                        layer.msg('保存文档');
                        saveCode();
                        return;
                    }
                    // 解析 JSON 数据
                    const data = JSON.parse(event.data);

                    let reasoning_content = data.choices[0].delta.reasoning_content;
                    if(reasoning_content){
                        $('.reasoning_content').append(reasoning_content);
                    }
                    let html = data.choices[0].delta.content;
                    if(html){
                        html = fixOutput(html);
                        //替换换行符
                        // html = html.replace(/\n/g, '');
                        $('.layui-card-body').append(html);
                        //提交
                        // $.post('/index/test/saveApiDocHtml', {html:html},function(res){
                        //
                        // },'json');
                    }


                    // html.replace(/\`\`\`/g, '').replace(/html DOCTYPE/g, '<!DOCTYPE');
                };
                // 处理错误事件
                eventSource.onerror = function(event) {
                    console.error('SSE error:', event);
                    eventSource.close();
                };

            });
        });

        // 自动修复工具函数
        function fixOutput(html) {
            return html
                // 修复转义字符
                .replace(/&gt;/g, '>')
                .replace(/&lt;/g, '<')
                // 补全缺失标签
                .replace(/<body>(.*)<\/body>/s, (m,p1) => `<body>${p1}</body>`)
                // 参数值替换
                .replace(/\{(\w+)\}/g, (m,p1) => {
                    return p1 === 'number' ? '123' : 'abc';
                });
        }

        //保存代码
        function saveCode(){
            let html = $('.layui-card-body').html();
            $.post('/index/test/saveApiDocHtml', {html:html},function(res){

            },'json');
        }
    </script>
</body>
</html>